<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="/dist/lib/layui-v2.6.3/css/layui.css" media="all">
        <link rel="stylesheet" href="/dist/css/public.css" media="all">
        <style>
            body {
                background-color: #ffffff;
            }
        </style>
    </head>
    <body>
        <div class="layui-form layuimini-form" lay-filter="permissionForm">
            <!--            权限id-->
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">父菜单</label>
                <div class="layui-input-block">
                    <div id="permission" class="xm-select-demo"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">权限名称</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="required" lay-reqtext="权限名不能为空" placeholder="请输入权限名" value=""
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">权限标识</label>
                <div class="layui-input-block">
                    <input type="text" name="permission"  placeholder="请输入权限标识"  class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">图标</label>
                <div class="layui-input-block">
                    <input type="text" name="icon" id="iconPicker" lay-filter="iconPicker" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">菜单URL</label>
                <div class="layui-input-block">
                    <input type="text" name="href"  placeholder="页面路径"  class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">排序号</label>
                <div class="layui-input-block">
                    <input type="number" name="orderNumber"  class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label" >权限类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="isMenu"  class="layui-input" value="0" title="目录">
                    <input type="radio" name="isMenu"  class="layui-input" value="1" title="菜单" checked>
                    <input type="radio" name="isMenu"  class="layui-input" value="2" title="按钮">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
                </div>
            </div>
        </div>
        <script src="/dist/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
        <script>
            layui.extend({
                xmSelect:'/dist/extend/xm-select',
                iconPicker: '/dist/extend/module/iconPicker/iconPicker'
            }).use(['form','xmSelect','iconPicker'], function () {
                var form = layui.form,
                    layer = layui.layer,
                    xmSelect = layui.xmSelect,
                    iconPicker = layui.iconPicker,
                    $ = layui.$;

                iconPicker.render({
                    // 选择器，推荐使用input
                    elem: '#iconPicker',
                    // 数据类型：fontClass/unicode，推荐使用fontClass
                    type: 'fontClass',
                    // 是否开启搜索：true/false
                    search: true,
                    // 点击回调
                    click: function (data) {
                        // console.log(data);
                    }
                });


                //渲染下拉树
                let permissionRadio = xmSelect.render({
                    el: '#permission',
                    radio: true,
                    name:'parentId',
                    clickClose: true, // 点击后关闭
                    data: []   // {name: ,value: }
                })


                // 发送异步请求 查询权限信息
                $.get('/permission/treeSelect',function (res) {
                    let  dt =  res.data   // 所有的角色信息   [ {roleId:  ,roleName:  }]
                    let array = []
                    for (let i = 0; i < dt.length; i++) {
                        let obj = {};
                        obj.name = dt[i].title
                        obj.value= dt[i].id
                        array.push(obj)
                    }

                    let  id = sessionStorage.getItem("permissionId");
                    // 根据权限id  查询权限的具体信息  回显在表单中
                    $.get('/permission/selectById',{id},function (res) {
                        let  permission = res.data
                        console.log("permission:"+permission)

                        form.val('permissionForm',permission)

                        // 回显下拉选的数据
                        let permissionArray = [];
                        permissionArray.push(permission.parentId)
                        console.log("permissionArray:"+permissionArray)
                        //  更新下拉选
                        permissionRadio.update({
                            data: array,
                            initValue:permissionArray
                        })

                        /**
                         * 选中图标 （常用于更新时默认选中图标）
                         * @param filter lay-filter
                         * @param iconName 图标名称，自动识别fontClass/unicode
                         */
                        iconPicker.checkIcon('iconPicker',permission.icon);
                        // 重新渲染表单
                        form.render()
                    })

                })

                //监听提交
                form.on('submit(saveBtn)', function (data) {

                    let  parentId=   permissionRadio.getValue('valueStr')
                    //判定添加的权限是否是目录
                    if(parentId==''){
                        parentId=0;
                    }
                    data.field.parentId = parentId;

                    // 发送ajax请求  保存角色信息
                    $.post('/permission/update', data.field, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1}, function () {
                                //关闭弹窗
                                var iframeIndex = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(iframeIndex);
                                // 重新渲染表格  展示新添加角色信息
                                parent.layui.table.reload('menu-table')
                            })
                        } else {
                            layer.msg(res.msg, {icon: 2})
                        }
                    })
                    return false;
                });

            });
        </script>
    </body>
</html>